<template>
	<a-list
		class="demo-loadmore-list"
		:loading="initLoading"
		item-layout="horizontal"
		:data-source="list"
	>
		<template #loadMore>
			<div
				v-if="!initLoading && !loading"
				:style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
			>
				<a-button @click="onLoadMore">loading more</a-button>
			</div>
		</template>
		<template #renderItem="{ item }">
			<a-list-item>
				<template #actions>
					<a-button
						type="primary"
						@click="showDocument(item.id)"
						>查看文档</a-button
					>
				</template>
				<a-skeleton
					avatar
					:title="false"
					:loading="!!item.loading"
					active
				>
					<a-list-item-meta :description="item.description">
						<template #title>
							<a href="https://www.antdv.com/">
								{{ item.name }}
								<span>
									<a-tag :color="item.status === 1 ? 'green' : 'red'">
										{{ item.status === 1 ? '已发布' : '未发布' }}
									</a-tag>
								</span>
							</a>
						</template>
					</a-list-item-meta>
					<div>content</div>
				</a-skeleton>
			</a-list-item>
		</template>
	</a-list>
</template>
<script lang="ts" setup>
import { onMounted, ref, nextTick } from 'vue';
import api from '@/api';
import InterfaceInfo = API.InterfaceInfo;
import { useRouter } from 'vue-router';

const count = 3;
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;
const initLoading = ref(true);
const loading = ref(false);
const data = ref<InterfaceInfo>([]);
const list = ref<InterfaceInfo>([]);
const router = useRouter();
let current = ref(1);

onMounted(() => {
	api.interfaceInfoController
		.listInterfaceInfoByPage({ pageSize: 10, current: current.value })
		.then(response => {
			list.value = response.data.data.records;
			data.value = response.data.data.records;
		})
		.then(() => {
			initLoading.value = false;
			current.value++;
		});
});

const onLoadMore = () => {
	loading.value = true;
	list.value = data.value.concat([...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })));
	api.interfaceInfoController.listInterfaceInfoByPage({ pageSize: 10, current: current.value }).then(response => {
		const newData = data.value.concat(response.data.data.records);
		loading.value = false;
		data.value = newData;
		list.value = newData;
		current.value++;
		nextTick(() => {
			// Resetting window's offsetTop so as to display react-virtualized demo underfloor.
			// In real scene, you can using public method of react-virtualized:
			// https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
			window.dispatchEvent(new Event('resize'));
		});
	});
};
const showDocument = (id: number) => {
	router.push({ path: `/interface/${id}` });
};
</script>
<style scoped>
.demo-loadmore-list {
	min-height: 350px;
}
</style>
